<template>
	<!-- 手机号输入模式 -->
	<view>
		<Header :showBack="canBack" :title="navigatorTitle"></Header>
		<!-- 除娄底、湘乡以外，其他城市请通过扫学校二维码添加数据 -->
		<view class="container">
			<view class="form">
				<view>
					<view>学校:</view>
					<view class="right-ipt">{{ info.organizationName }}</view>
				</view>
				<view v-for="(item, index) in classList" :key="index">
					<view>{{ item.name }}:</view>
					<view @click="showSelector(index)" class="right-ipt">
						<view style="width: 100%; height: 100%; line-height: 60upx">{{ item.value }}</view>
						<image class="icon-up" src="../../static/img/go.png" mode=""></image>
					</view>
				</view>

				<view>
					<view>姓名</view>
					<view class="user-name">
						<input style="width: 100%; height: 100%" type="text" v-model="childName" placeholder="请输入姓名或者别名" placeholder-class="user-name-pla" />
					</view>
				</view>
				<view>
					<view>电话</view>
					<view class="user-name">
						<input style="width: 100%; height: 100%" type="text" v-model="inputPhone" placeholder="请输入电话" placeholder-class="user-name-pla" />
					</view>
				</view>
				<view class="attention">注：此处只能绑定同一所学校的学生，如果需要绑定其他学校，请扫学校对应的二维码进行绑定。</view>
				<button @click="showErrToast('请先勾选用户协议')" type="default" class="formet-btn" v-if="!agree">确定</button>
				<button @click="addStudent(loginPhone)" type="default" class="formet-btn" v-if="agree && havePhone">确定</button>
				<button @click="showErrToast('请填写完整资料')" type="default" class="formet-btn" v-if="agree && !havePhone && !isABNotEmpty">确定</button>
				<button class="formet-btn" @click="summit" v-if="agree && !havePhone && isABNotEmpty" >确定</button>
			</view>
			<view class="button-box" @click="agree = !agree">
				<view>
					<checkbox-group>
						<checkbox :checked="agree" style="transform: scale(0.8)" />
					</checkbox-group>
					<view class="text" style="font3-size: 24upx; color: #909399; bottom: 50upx">
						您已阅读并同意
						<text @click.stop="toagreement" style="color: #007aff">《用户服务协议》</text>
						<text @click.stop="openPrivacyContract" style="color: #007aff">，《隐私协议》</text>
					</view>
				</view>
			</view>
			

			<view v-if="!canBack" class="beizhu">备注：在系统中不存在的会员数据，在此输入相关信息进行新增操作，以匹配微信代扣数据。</view>
		</view>
		<view v-show="show" class="zzc" @click.stop="close">
			<view @click.stop="">
				<view class="btn">
					<view @click="close">取消</view>
					<view @click="choose" style="color: #007aff">确定</view>
				</view>
				<view class="search">
					<input type="text" value="" v-model="word" placeholder="搜索" />
				</view>
				<view class="box">
					<picker-view class="picker-area" @pickstart="disable = true" @pickend="disable = false" @change="changeX">
						<picker-view-column>
							<view class="item" v-if="item.name ? item.name.includes(word) : false" v-for="(item, index) in classList[0].list" :key="index">
								{{ item.name }}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var WXBizDataCrypt = require('@/utils/RdWXBizDataCrypt.js');
import { decryptPhone } from '@/services/phoneDecryption.js'
export default {
	data() {
		return {
			navigatorTitle: '绑定多个',
			agree: false,
			word: '',
			show: false,
			appId: getApp().globalData.appId,
			sessionkey: uni.getStorageSync('sk'),
			canBack: false,
			childName: '',
			inputPhone: '',
			isGZH: 0,
			urlList: [''],
			curIndex: 0,
			changeIndex: 0,
			classList: [{ name: '班级', value: '请选择', list: [], changeId: '' }],
			disable: false,
			havePhone: false,
			loginPhone: '',
			info: uni.getStorageSync('info')
		};
	},
	onLoad(e) {
		this.init(e);
	},
	computed: {
		isABNotEmpty() {
			return this.classList[0].changeId && this.childName.trim();
		}
	},
	methods: {
		init(e) {
			if (e.title) {
				this.navigatorTitle = e.title;
			}
			if (e.loginPhone) {
				this.havePhone = true;
				this.loginPhone = e.loginPhone;
			}
			if (e.canBack == 1) {
				this.canBack = true;
			}
			if (e.isGZH == 1) {
				this.isGZH = 1;
			}
			this.getList(e.shcoolId);
		},
		handleAgree() {},
		toagreement() {
			uni.navigateTo({
				url: '/pages/agreement/agreement'
			});
		},
		showErrToast(title) {
			uni.showToast({
				icon: 'none',
				title: title
			});
		},
		close() {
			if (this.disable) return;
			this.show = false;
		},
		choose() {
			if (this.disable) return;
			if (this.word) {
				let nameList = this.classList[0].list.map((item) => {
					return item.name;
				});
				let searchList = nameList.filter((item) => {
					if (item.includes(this.word)) {
						return item;
					}
				});
				if (searchList.length > 0) {
					this.change(nameList.indexOf(searchList[this.changeIndex]));
				}
			} else {
				this.change(this.changeIndex);
			}
			this.show = false;
		},
		changeX(e) {
			if (this.changeIndex != e.detail.value[0]) {
				this.changeIndex = e.detail.value[0];
			}
			this.disable = false;
		},
		showSelector(index) {
			if (this.curIndex != index) {
				this.word = '随便写个什么反正是重置picker-view';

				this.$nextTick(() => {
					this.curIndex = index;
					this.word = '';
				});
			}
			this.$nextTick(() => {
				this.show = true;
			});
		},
		change(x) {
			if (this.classList[0].list.length > 0) {
				this.classList[0].value = this.classList[0].list[x].name;
				this.classList[0].changeId = this.classList[0].list[x].id;
			}
		},
		getList(shcoolId) {
			let data = {
				condition: {
					parentId: shcoolId
				}
			};
			this.$http('/member/api/organization/list', data, (res) => {
				if (res.data.items.length > 0) {
					let arr = [];
					res.data.items.forEach((item) => {
						arr.push({
							name: item.organizationName,
							id: item.id
						});
					});
					arr.unshift({
						name: '请选择',
						id: ''
					});
					this.classList[0].list = arr;
				}
			});
		},
		goCard() {
			uni.navigateTo({
				url: '/pages/addCard/addCard'
			});
		},
		addStudent(phone) {
			let that = this;
			this.$http(
				'/minprogram/api/member/getStudentInfo',
				{
					schoolId: this.info.organizationId,
					gradeId: this.classList[0].changeId,
					ownerName: this.childName.trim()
				},
				async (res) => {
					if (res.data.phone) {
						let signPhone = await decryptPhone(res.data.phone,this)
						if (signPhone == phone) {
							uni.showToast({
								title: '请勿重复添加',
								icon: 'none'
							});
						} else {
							if (res.data.isSign) {
								uni.showToast({
									title: '该学生已签约',
									icon: 'none'
								});
							} else {
								uni.showModal({
									content: '抱歉~该学生绑定号码与本机号码不一致，建议使用资料中预留号码开通，或自行修改号码。',
									cancelText: '我知道了',
									confirmText: '立即修改',
									success: function (suc) {
										if (suc.confirm) {
											uni.navigateTo({
												url: `/pages/changePhone/changePhone?oldPhone=${signPhone}&newPhone=${phone}&ownerName=${that.childName.trim()}&gradeId=${
													that.classList[0].changeId
												}&organizationId=${that.info.organizationId}&id=${res.data.id}&schoolName=${that.info.organizationName}&className=${that.classList[0].value}&isGZH=${
													that.isGZH
												}`
											});
										} else if (suc.cancel) {
										}
									}
								});
							}
						}
					} else {
						this.$http(
							'/minprogram/api/member/saveOwnerStudent',
							{
								ownerName: this.childName.trim(),
								organizationId: this.info.organizationId,
								gradeId: this.classList[0].changeId
							},
							(res1) => {
								if (res1.data.value) {
									if (this.isGZH == 1) {
										uni.reLaunch({
											url: '/pages/niuniuIndex/niuniuIndex?type=2'
										});
									} else {
										uni.reLaunch({
											url: '/pages/index/index?type=2'
										});
									}
								}
							}
						);
					}
				},
				'GET'
			);
		},
		summit(e) {
			this.addStudent(this.inputPhone);
		}
	}
};
</script>

<style scoped lang="less">
.form {
	background-color: #fff;
	border-radius: 8upx;
	padding: 40upx 0 1upx;
	box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, 0.2);
	> view {
		width: 100%;
		display: flex;
		height: 100upx;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		> view:first-child {
			line-height: 100upx;
			height: 100upx;
			width: 100upx;
		}
		> view:last-child {
			width: 460upx;
			height: 60upx;
			padding: 0 20upx;
		}
	}
	.formet-btn {
		width: 93%;
		background: #49b9ad;
		color: #fff;
		margin-top: 120upx;
	}
}
button {
	background-color: #2bac6b;
	width: 90%;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	color: #ffffff;
	font-size: 30upx;
	margin: 30upx auto;
	border-radius: 10upx;
}
.button {
	width: 90%;
	height: 96upx;
	line-height: 96upx;
	text-align: center;
	color: #ffffff;
	font-size: 30upx;
	margin: 30upx auto;
	border-radius: 10upx;
}
.right-ipt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #888;
	background: #f7f7f7;
	font-size: 24upx;
	.icon-up {
		transform: rotate(90deg);
		width: 20upx;
		height: 20upx;
	}
}
.user-name {
	background: #f7f7f7;
	color: #888;
	font-size: 22upx;
}
.formet-btn {
	width: 100%;
	background: #49b9ad;
	color: #fff;
}
.zzc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 100;
	> view {
		width: 100%;
		height: 700upx;
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		> view.btn {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			> view {
				height: 100%;
				width: 160upx;
				font-size: 34upx;
				line-height: 80upx;
				text-align: center;
				color: #999999;
			}
		}
		> view.search {
			width: 100%;
			> input {
				background-color: #eeeeee;
				width: 90%;
				margin: 0 auto;
				height: 70upx;
				border-radius: 10upx;
				text-align: center;
			}
		}
		> view.box {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 20upx 0;
			.picker-area {
				width: 100%;
				height: 100%;
				text-align: center;
			}

			.item {
				line-height: 34px;
			}
		}
	}
}

.beizhu {
	width: 100%;
	font-size: 24upx;
	color: #999999;
	box-sizing: border-box;
	padding: 50upx;
	text-align: center;
}

.button-box {
	font-size: 26upx;
	margin: 20upx auto;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 8upx 0;

	> view {
		font-size: 22upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
.attention {
	width: 460rpx!important;
	color: #ff1e10;
	font-size: 22rpx!important;
	text-align: left;
	margin-left: 148rpx;
}
</style>
